<script setup lang="ts">
import { CSSProperties } from "vue";
import { Config } from "./index";
import { ActionSheetAction } from "vant";

const props = withDefaults(
  defineProps<{
    /**动画时长，单位秒，设置为 0 可以禁用动画	 */
    duration?: number;
    /**动画时长，单位秒，设置为 0 可以禁用动画	 */
    zIndex?: number;
    /**是否显示圆角 */
    round?: boolean;
    /**是否显示遮罩层 */
    overlay?: boolean;
    /**	自定义遮罩层类名 */
    overlayClass?: string;
    /**自定义遮罩层样式 */
    overlayStyle?: CSSProperties;
    /**自定义遮罩层样式 */
    lockScroll?: boolean;
    /**是否在显示弹层时才渲染节点 */
    lazyRender?: boolean;
    /**	是否在页面回退时自动关闭 */
    closeOnPopstate?: boolean;
    /**是否在点击选项后关闭 */
    closeOnOlickAction?: boolean;
    /**是否在点击遮罩层后关闭 */
    closeOnClickOverlay?: boolean;
    /**是否开启底部安全区适配 */
    safeAreaInsetBottom?: boolean;
    /**指定挂载的节点，等同于 Teleport 组件的 to 属性 */
    teleport?: string;
  }>(),
  {
    overlay: true,
    round: true,
    lockScroll: true,
    lazyRender: true,
    closeOnPopstate: true,
    closeOnClickOverlay: true,
    safeAreaInsetBottom: true,
    teleport: "body",
  }
);
const config = reactive<Config>({});
function open(cfg: Config) {
  Object.assign(config, cfg);
  config.show = true;
}
function close() {
  config.show = false;
}
defineExpose({ open, config, close });
const emit = defineEmits<{
  (e: "select", v: { action: ActionSheetAction; index: number }): void;
  (e: "click-overlay", v: MouseEvent): void;
  (e: "cancel"): void;
  (e: "open"): void;
  (e: "close"): void;
  (e: "opened"): void;
  (e: "closed"): void;
}>();
const slots = defineSlots<{
  default: (props: {}) => any;
  description: (props: {}) => any;
  cancel: (props: {}) => any;
  action: (props: { action: ActionSheetAction; index: number }) => any;
}>();
</script>

<template>
  <VanActionSheet
    :="{ ...props, ...config }"
    @select="(e) => emit('select', e)"
    @click-overlay="(e:any) => emit('click-overlay', e)"
    @cancel="emit('cancel')"
    @open="emit('open')"
    @close="emit('close')"
    @opened="emit('opened')"
    @closed="emit('closed')"
    @update:show="(v) => (config.show = v)"
  >
    <template #[name]="slotProps" v-for="(slotItem, name) in slots">
      <slot :name="name" :="{ ...slotProps }"> </slot>
    </template>
  </VanActionSheet>
</template>

<style lang="scss" scoped></style>
